<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <link rel="stylesheet" href="../assets/lib/toastr/toastr.min.css">
  <link rel="stylesheet" href="../assets/lib/NProgress/NProgress.css">
  <script src="../assets/lib/echarts/echarts.min.js"></script>
  <script src="../assets/lib/jquery-3.6.0.min.js"></script>
  <script src="../assets/lib/echarts/china.js"></script>
  <script src="../assets/lib/toastr/toastr.min.js"></script>
  <script src="../assets/lib/NProgress/NProgress.js"></script>
  <script src="../assets/lib/axios.js"></script>
  <script src="../assets/js/common.js"></script>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="map" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">






    async function fn() {
      //获取用户名和密码
      const username = 'git'
      const password = '123456'
      //发送请求
      const res = await axios({
        url: '/api/login',
        method: 'post',
        data: {
          username,
          password,
        }
      })
      sessionStorage.setItem('token8848', res.data.token)
      const result = await axios({ url: "/student/list" });
      console.log(result);
      //地图数据
      let a = { '顺义校区': [116.4551, 40.2539] }
      let b = []
      result.data.data.forEach(item => {
        a[item.county] = [item.jing, item.wei]
        b.push([{ name: item.county, value: 0 }])
      })

      mapChart(a, b)
    }
    fn()

    function mapChart(a, b) {
      let myChart = echarts.init($('#map')[0]);
      // 位置 + 经纬度
      let chinaGeoCoordMap = a;
      let chinaDatas = b;

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord = chinaGeoCoordMap[dataItem[0].name];
          let toCoord = [116.4551, 40.2539]; // 目标点经纬度（北京顺义校区）
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord,
            }]);
          }
        }
        return res;
      };
      let series = [];
      [['顺义校区', chinaDatas]].forEach(function (item, i) {
        series.push({
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5, //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.2 //尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: { //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4 //波纹圆环最大限制，值越大波纹越大
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function (params) {//圆环显示文字
                return params.data.name;
              },
              fontSize: 12
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function (val) {
            return 4 + val[2] * 5; //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#f00'
            }
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
            };
          }),
        },
          //被攻击点
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: 'stroke',
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [5, 0],
                color: '#9eca7f', // 目标点文字颜色
                formatter: '{b}',
                textStyle: {
                  color: "#9eca7f"
                }
              },
              emphasis: {
                show: true,
                color: "#f60", // 目标点鼠标移入的颜色
              }
            },
            symbol: 'pin',
            symbolSize: 50,
            data: [{
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
          }
        );
      });

      const option = {
        title: {
          text: '来京路线 From',
          textStyle: {
            color: '#6d767e'
          }
        },
        // tooltip: {
        //   trigger: 'item',
        //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
        //   borderColor: '#FFFFCC',
        //   showDelay: 0,
        //   hideDelay: 0,
        //   enterable: true,
        //   transitionDuration: 0,
        //   extraCssText: 'z-index:100',
        //   formatter: function (params, ticket, callback) {
        //     //根据业务自己拓展要显示的内容
        //     var res = "";
        //     var name = params.name;
        //     var value = params.value[params.seriesIndex + 1];
        //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        //     return res;
        //   }
        // },
        // backgroundColor: "#013954",
        // visualMap: { //图例值控制
        //   min: 0,
        //   max: 1,
        //   calculable: true,
        //   show: false,
        //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              // color: 'rgba(51, 69, 89, .5)', //地图背景色
              // color: '#5a6fc0', //地图背景色
              // borderColor: '#516a89', //省市边界线00fcff 516a89
              // borderWidth: 1
            },
            emphasis: {
              color: 'rgba(37, 43, 61, .5)' //悬浮背景
            }
          }
        },
        series: series
      };
      myChart.setOption(option);
    }
  </script>
</body>

</html>